<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" name="search" placeholder="请输入书名" />
			<button type="button" id="btn_search" >搜索</button>
			<button type="button" id="btn_add" >添加</button>
		</div>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<table border="1">
				<thead>
					<th>id</th>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>出版日期</th>
					<th>操作</th>
				</thead>
			
			<tbody>
				
			</tbody>
		</table>
	
	<script type="text/javascript">
		let books=[
			{id:1,name:'Java从入门到放弃',price:56,count:1,date:'2020-07-01', user:"chh"},
			{id:2,name:'Vue从入门到放弃',price:56,count:5,date:'2020-07-01', user:"he"},
			{id:3,name:'Mysql从入门到放弃',price:78,count:6,date:'2020-07-01', user:"chh"},
			{id:4,name:'啥都从入门到放弃',price:97,count:4,date:'2020-07-01', user:"he"}
		]
		let data=JSON.parse(localStorage.getItem("data"));
		if (!data) {
			data=books;
			localStorage.setItem("data",JSON.stringify(data));
		}
		//先模拟用户登录成功
		sessionStorage.setItem("user","chh");
		//获取tbody
	    let $tbody = $("table").find("tbody");
		//获取数据
		function uputa(bookeName){
			for (let index in data) {
				item=data[index];
				console.log(item.user!==sessionStorage.getItem("user"));
				console.log(item.user,sessionStorage.getItem("user"));
				
				if (item.user!==sessionStorage.getItem("user")) {
					continue;
				}
				//搜索判断
				if(bookeName && item.name.toLowerCase().indexOf(bookeName.toLowerCase()) === -1) {
					continue;
				}
				let tr=`
				<tr>
				<td>${item.id}</td>
				<td>${item.name}</td>
				<td>${item.price}</td>
				<td>${item.count}</td>
				<td>${item.date}</td>
				<td>
				<button type="button" onclick="edit(${index})">编辑</button>
				<button type="button" onclick="del(${index})">删除</button>
				</td>
				</tr>`;
				console.log(tr);
			$tbody.append(tr);
			console.log($tbody);
			}
		};
		//绑定事件
		function init(){
			$('#btn_search').click(search);
			$('#btn_add').click(add);
		}
		//搜索
		function search(){
			//获取输入框内容
			let search=$("input[name='search']").val();
			$tbody.empty();
			uputa(search);
		}
		//删除书籍
		function del(index){
			data.splice(index,1);
			localStorage.setItem("data",JSON.stringify(data));
			$tbody.empty();
			uputa();
		}
		//添加书籍
		function add(){
			location.href="add.html";
		}
		//编辑书籍
		function edit(index){
			let item1=data[index];
			sessionStorage.setItem("editname",JSON.stringify(item1));
			data.splice(index,1);
			localStorage.setItem("data",JSON.stringify(data));
			console.log(item1);
			location.href="add.html";
		}
		uputa();
		init();
	</script>
	</body>
</html>
